<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <input id="iptTest" />
        <ul>
        </ul>
    </body>
    <script>
        $(document).ready(function () {
            $('#iptTest').keyup(function () {
                var val = $('#iptTest').val();
                getResult(val);
            });

            function getResult(value) {
                $.ajax({
                    type: "get",
                    url: "https://addr-sug.taobao.com/suggestion",
                    data: {'l1': '310000', 'l2': '310100', 'l3': '310112', 'lang': 'zh-S', 'addr': value},
                    dataType: "jsonp",
                    async: false,
                    success: function (data) {
                        var a = "";
                        if (data.success === true && data.result.length > 0) {
                            $.each(data.result, function (index, obj) {
                                 $('ul').append('<li>' + obj + '</li>');
                            });
                        } else{
                            alert('没有数据，请重试！');
                        }
                    },
                    error: function (data) {
                    }
                });
            }
            ;
            
            $('li').live('click',function(){
                 var text = this.textContent;
                 $('ul').html("");
                 $('#iptTest').val(text);
//                 $('#iptTest').attr("size",text.length);
                 $('#iptTest').css("width",text.length*11.2);
            });
        });
    </script>
</html>

